<template>
  <div class="home">
	<div class="home_head" v-if="dataArr.user">
		<div>
			<h3 class="Headline ">{{dataArr.user.name}}</h3>
			<p class="time" v-if="dataArr.user.end_date !== '' ">将于{{dataArr.user.end_date}}到期</p>
			<p class="time" v-else>暂无生效中的合同</p>
		</div>
		<div @click="user">
			<img class="portrait" :src="dataArr.user.portrait">
		</div>
	</div> 
	 <div class="bill">
		<div class="bill_item" @click="Dorm">
			<img :src="`${publicPath}img/1.png`">
			<h4>我的合同</h4>
		</div> 	
		<div class="bill_item" @click="record">
			<img :src="`${publicPath}img/2.png`">
			<h4>缴费记录</h4>
		</div> 	
		<div class="bill_item" @click="user">
			<img :src="`${publicPath}img/3.png`">
			<h4>账户设置</h4>
		</div> 	
	 </div>
	
	<div class="paid">
		<div class="paid_head">
			<h4 class="Subhead">待缴账单</h4>
			<p @click="record">
				<span class="sizeColor">缴费记录</span>
				<van-icon style="vertical-align: middle;" name="arrow" size="14"  color="#1375ff"/>
			</p>
		</div>
		
			<div class="total"  @click="bill(item)" v-for="(item,index) in dataArr.list" :key="index">
				<!-- <p class="time zd">{{item.amount?"滞纳金总额":"账单总额"}} </p> -->
				<!-- {{item.data_type?"滞纳金总额":"账单总额"}} -->
				<p class="time zd" v-if="item.data_type == 'bill' ">租赁账单</p>
				<p class="time zd" v-if="item.data_type == 'overdue' ">滞纳金账单</p>
				<p class="time zd" v-if="item.data_type == 'margin' ">保证金账单</p>
				<h3 v-if="item.data_type == 'bill' ">{{item.residue_receivable_fee?item.residue_receivable_fee:item.receivable_amount}}</h3>
				<h3 v-if="item.data_type == 'overdue' ">{{item.receivable_amount}}</h3>
				<h3 v-if="item.data_type == 'margin' ">{{item.receivable_fee}}</h3>
				
				<van-button color="#1375FF" block>立即缴费</van-button>
				<div class="total_footer" v-if="item.data_type == 'bill' || item.data_type == 'overdue'">
					<div class="van-ellipsis" v-if="!item.amount">
					   <span class="total_title">计费期间：</span>
					   <span class="text">{{item.start_date}} 至 {{item.end_date}}</span>
					</div>
					<div v-if="!item.amount">
						<p class="total_title van-ellipsis" v-if="item.park">租赁位置：{{item.park.pk_name}}</p>
						<p class="text left_p" v-if="item.contract">{{item.contract.room}}</p>
					</div>
					<div v-else>
						<span class="total_title">关联账单：</span>
						<span class="text" v-if="item.bill">{{item.bill.sn}}</span>
					</div>
				</div>
				
				<div class="total_footer" v-if="item.data_type == 'margin' ">
					<div class="van-ellipsis" v-if="!item.amount">
					   <span class="total_title">计费期间：</span>
					   <span class="text">{{item.start_date}} 至 {{item.end_date}}</span>
					</div>
					<div>
						<p class="text" style="color: #1f272e;">应收日期：{{item.receivable_date}}</p>
					</div>
					<div>
						<p class="total_title van-ellipsis">租赁位置：{{item.room}}</p>
					</div>
				</div>
			</div>
		
		<div class="NotYet" v-if="dataArr.list == '' || dataArr.list == null ">
			<div class="NotYet_img">
				<van-image
				  width="100"
				  height="100"
				  fit="contain"
				  :src="`${publicPath}img/8.png`"
				/> 
			</div>
			<h3>当前暂无账单</h3>
			<p class="time">棒棒哒，请继续保持哦~</p>
		</div>
		
	</div> 
	 
	<div class="other">
		<div class="paid_head">
			<h4 class="Subhead">其它服务</h4>
			<p @click="tjsHome">
				<span class="sizeColor">更多服务</span>
				<van-icon style="vertical-align: middle;" name="arrow" size="14"  color="#1375ff"/>
			</p>
		</div>
		<div class="other_box">
			<div class="other_item" @click="tjsWorkShop">
				<img :src="`${publicPath}img/4.png`">
				<h4>优质厂房</h4>
			</div>
			<div class="other_item" @click="tjsDemand">
				<img :src="`${publicPath}img/5.png`">
				<h4>对接需求</h4>
			</div>
			<div class="other_item" @click="tjsReward">
				<img :src="`${publicPath}img/6.png`">
				<h4>任务悬赏</h4>
			</div>
		</div>
	</div> 
	<!-- @click="callPhone" -->
	<p class="service" >—— 如有问题请联系负责您的厂长 ——</p> 
	 
  </div>
</template>

<script>
import {Button,Image,CheckboxGroup,CellGroup,Cell} from "vant"
import {mapGetters} from "vuex"
import {home} from "@/api/index";
export default {
  name: 'Home',
  components: {
	  [Button.name]:Button,
	  [Image.name]:Image,
	  [CellGroup.name]:CellGroup,
	  [CheckboxGroup.name]:CheckboxGroup,
	  [Cell.name]:Cell,
  },
  data(){
	return{
		dataArr:[],
		publicPath: process.env.BASE_URL,
	}  
  },
  computed:{
	// ...mapGetters(["userInfo"]),
  },
   async activated() {
	this.dataArr = await home()
	// await this.$store.dispatch("fetchUserInfo", this.userInfo.id);
  },
  methods:{
	  // 调用拨号功能
	  callPhone () {
	      window.location.href = 'tel:' + 13413141269
	  },
	  Dorm(){
		this.$router.push("/dorm")  
	  },
	  user(){
	  	this.$router.push("/info")  
	  },
	  record(){
	  	this.$router.push("/record")  
	  },
	  bill(item){
	  	if(item.data_type == "overdue"){
	  		this.$router.push({path:"/fee",query:{"id":item.id,"type":item.data_type}})
	  	}else if(item.data_type == "bill"){
	  		this.$router.push({path:"/bill",query:{"id":item.id,"type":item.data_type}})
	  	}else{
	  		this.$router.push({path:"/bond",query:{"id":item.id,"type":item.data_type}})
	  	}
	  },
	  tjsWorkShop(){
		window.location.href = "http://tianji.unspace.cn/static/v2/?#/workshop/index"
	  },
	  tjsDemand(){
	  	window.location.href = "http://tianji.unspace.cn/static/v2/#/demands"
	  },
	  tjsReward(){
	    window.location.href = "http://tianji.unspace.cn/static/v2/?#/suppliers"
	  },
	  tjsHome(){
		window.location.href = "http://tianji.unspace.cn/static/v2/?#/"  
	  }
	  
	  
  }
}
</script>

<style scoped lang="less">
.home{
	padding-bottom:40px;
	.home_head{
		display: flex;
		align-items: center;
		justify-content: space-between;
		align-content: center;
		margin:37px 15px;
		.portrait{
			width:60px;
			height:60px;
			object-fit: cover;
			border-radius: 50%;
			margin-right:9px;
			vertical-align: bottom;
		}
	}
	.bill{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin:0 15px;
		// overflow-x:auto;
		.bill_item{
			position: relative;
			// margin-right: 16px;
			img{
				width:108px;
				height:108px;
				object-fit: cover;
			}
			h4{
				position: absolute;
				top: 57.5px;
				font-size:15px;
				font-weight: 700;
				color: #fff;
				left: 17px;
			}
		}
	}
	// // 隐藏滚动条
	// .bill::-webkit-scrollbar {
	// 	background-color: transparent;
	// 	display: none;
	// }
	
	.paid{
		margin:44px 15px 0;
		.paid_head{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.sizeColor{
				font-weight: bold;
			}
		}
		
	}
	
	.total{
		width:100%;
		// height:270px;
		background:rgba(255,255,255,1);
		box-shadow:0px 15px 33px 0px rgba(138,149,158,0.1);
		border-radius:10px;
		margin:20px auto;
		.total_item{
			margin:20px auto;
		}
		.time{
			text-align: center;
		}
		.zd{
			padding:20px 0;
		}
		h3{
			font-size:42px;
			font-weight:bold;
			color:rgba(31,39,46,1);
			text-align: center;
		}
		.van-button--block {
		    display: block;
		    width: 80%;
		    margin:23px auto;
			border-radius: 10px;
		}
		.total_footer{
			border-top:1px solid #F1F1F1;
			padding:14px 0;
			.total_title{
				width: 100%;
				color: #1F272E;
				font-size:13px;
				font-weight:400;
			}
			div{
				text-align: left;
				width:270px;
				margin:10px auto;
				.left_p{
					width:220px;
					margin-left: 65px;
				}
			}
		}
	}
	
	.other{
		margin:44px 15px 0;
		.paid_head{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.sizeColor{
				font-weight: bold;
			}
		}
		.other_box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin:20px auto;
			.other_item{
				position: relative;
				img{
					width:102px;
					height: 68px;
					object-fit: cover;
				}
				h4{
					position: absolute;
					left:5px;
					top:5px;
					font-size:15px;
					font-weight:bold;
					color:rgba(31,39,45,1);
				}
			}
		}
	}
	.service{
		text-align: center;
		margin-top:70px;
		color: #999;
		font-size: 13px;
	}
}	
.NotYet{
	width:100%;
	background:rgba(255,255,255,1);
	box-shadow:0px 15px 33px 0px rgba(138,149,158,0.1);
	border-radius:10px;
	margin:20px auto;
	text-align: center;
	padding-bottom: 30px;
	padding-top:30px;
	.NotYet_img{
		// padding:20px 0;
	}
	h3{
		font-size:25px;
		font-weight:bold;
		color:rgba(31,39,46,1);
		margin:10px auto;
	}
}

@media (min-width:750px) {
	.home{
		padding-bottom:40px;
		.home_head{
			display: flex;
			align-items: center;
			justify-content: space-between;
			align-content: center;
			margin:37px 15px;
			.portrait{
				width:60px;
				height:60px;
				object-fit: cover;
				border-radius: 50%;
				margin-right:9px;
				vertical-align: bottom;
			}
		}
		.bill{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin:0 15px;
			// overflow-x:auto;
			.bill_item{
				position: relative;
				// margin-right: 16px;
				img{
					width:108px;
					height:108px;
					object-fit: cover;
				}
				h4{
					position: absolute;
					top: 57.5px;
					font-size:15px;
					font-weight: 700;
					color: #fff;
					left: 17px;
				}
			}
		}
		// // 隐藏滚动条
		// .bill::-webkit-scrollbar {
		// 	background-color: transparent;
		// 	display: none;
		// }
		
		.paid{
			margin:44px 15px 0;
			.paid_head{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.sizeColor{
					font-weight: bold;
				}
			}
			
		}
		
		.total{
			width:100%;
			// height:270px;
			background:rgba(255,255,255,1);
			box-shadow:0px 15px 33px 0px rgba(138,149,158,0.1);
			border-radius:10px;
			margin:20px auto;
			.total_item{
				margin:20px auto;
			}
			.time{
				text-align: center;
			}
			.zd{
				padding:20px 0;
			}
			h3{
				font-size:42px;
				font-weight:bold;
				color:rgba(31,39,46,1);
				text-align: center;
			}
			.van-button--block {
			    display: block;
			    width: 80%;
			    margin:23px auto;
				border-radius: 10px;
			}
			.total_footer{
				border-top:1px solid #F1F1F1;
				padding:14px 0;
				.total_title{
					width: 100%;
					color: #1F272E;
					font-size:13px;
					font-weight:400;
				}
				div{
					text-align: left;
					width:270px;
					margin:10px auto;
					.left_p{
						width:220px;
						margin-left: 65px;
					}
				}
			}
		}
		
		.other{
			margin:44px 15px 0;
			.paid_head{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.sizeColor{
					font-weight: bold;
				}
			}
			.other_box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin:20px auto;
				.other_item{
					position: relative;
					img{
						width:102px;
						height: 68px;
						object-fit: cover;
					}
					h4{
						position: absolute;
						left:5px;
						top:5px;
						font-size:15px;
						font-weight:bold;
						color:rgba(31,39,45,1);
					}
				}
			}
		}
		.service{
			text-align: center;
			margin-top:70px;
			color: #999;
			font-size: 13px;
		}
	}	
	.NotYet{
		width:100%;
		background:rgba(255,255,255,1);
		box-shadow:0px 15px 33px 0px rgba(138,149,158,0.1);
		border-radius:10px;
		margin:20px auto;
		text-align: center;
		padding-bottom: 30px;
		padding-top:30px;
		.NotYet_img{
			// padding:20px 0;
		}
		h3{
			font-size:25px;
			font-weight:bold;
			color:rgba(31,39,46,1);
			margin:10px auto;
		}
	}
}
</style>